<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
        <!-- <el-button type="primary" :size="size" icon="el-icon-plus" @click="showDialog">新增</el-button> -->
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @change-pagination="changePagination"
      >
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
          <el-button-group class="btn-group">
            <el-button type="primary" :size="size" icon="el-icon-plus" @click="showDialog">新增设备</el-button>
          </el-button-group>
        </template>
      </c-table>
    </div>
    <div v-if="dialogObj.isShow">
      <c-dialog
        class="dialog-box"
        :is-show="dialogObj.isShow"
        :title="dialogObj.title"
        close-btn
        @before-close="dialogObj.isShow = false"
        @on-submit="dialogConfirm"
      >
        <type-add ref="childRef" :init-data.sync="dialogObj.initData" :is-edit="dialogObj.isEdit"></type-add>
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
import CDialog from 'components/dialog'
// import dictObj from '@/store/dictData'
import TypeAdd from './add'
import { deviceQuerBaseDeviceListApi, deviceInitDeviceApi, deviceUpdateDeviceApi } from '@/api/deviceApi'
// import axios from 'axios'
// const context = process.env.VUE_APP_CONSOLE_PATH

export default {
  name: 'carManage',
  mixins: [mixinTable],
  components: {
    CDialog,
    TypeAdd
  },
  data(vm) {
    return {
      tableList: [],
      // 对话框对象
      dialogObj: {},
      // 表格内操作按钮
      tableInnerBtns: [
        {
          name: '编辑',
          icon: 'el-icon-edit',
          width: 130,
          handle(row) {
            const { id, name, address, status } = row
            vm.showDialog({
              title: '修改设备基础信息',
              isShow: true,
              isEdit: true,
              initData: {
                id,
                name,
                address,
                status
              }
            })
          }
        }
        // {
        //   name: '删除',
        //   icon: 'el-icon-delete',
        //   handle(row) {
        //     const { modelId, id } = row
        //     vm.confirmTip(`确定删除【${modelId}】车辆`, () => {
        //       vm.deleteHandle({ id })
        //     })
        //   }
        // }
      ],
      tableHeader: [
        {
          label: '设备编码',
          prop: 'sn',
          width: 100,
          fixed: true,
          search: {
            type: 'input'
          }
        },
        {
          label: '批次号',
          prop: 'batchNumber',
          width: 100,
          fixed: true,
          search: {
            type: 'input'
          }
        },
        {
          label: '同一批设备生产数量',
          prop: 'quantity',
          width: 160
        },
        // {
        //   label: '设备别名',
        //   prop: 'companyName'
        // },
        // {
        //   label: '地址',
        //   prop: 'cid'
        // },
        // {
        //   label: '图片',
        //   prop: 'carImgUri',
        //   width: 100,
        //   isImage: true
        // },
        {
          label: '状态',
          prop: 'status',
          formatter: row => row && vm.setTableColumnLabel(row.category, 'baseDeviceStatusList')
        },
        // {
        //   label: '创建时间',
        //   prop: 'createTime',
        //   width: 160
        // },
        {
          label: '更新时间',
          prop: 'updateTime',
          width: 160
        }
      ],
      formData: {
        sn: 1,
        batchNumber: 10
      },
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        totalNum: 0,
        sn: '',
        batchNumber: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    /*
     * 查询表格列表数据
     */
    fetchData() {
      // const { pageNo, pageSize } = this.pageInfo
      // const { dateTime, ...other } = this.searchObj
      // const searchDate = this.getSearchDate(dateTime, 'dateTime')
      // this.isLoading = true

      deviceQuerBaseDeviceListApi({
        pageSize: this.pageInfo.pageSize,
        pageNo: this.pageInfo.pageNo,
        sn: this.pageInfo.sn,
        batchNumber: this.pageInfo.batchNumber
      }).then(res => {
        console.log('266===', res)
        this.tableList = res.data.data
        this.pageInfo.totalNum = res.totalCount
        console.log(this.tableList)
      })
      // this.$api.vehicle
      //   .fetch('carMrgList', {
      //     ...searchDate,
      //     ...other,
      //     rows: pageNo,
      //     offset: pageSize
      //   })
      //   .then(res => {
      //     this.isLoading = false
      //     if (res && res.totalCount) {
      //       const { data, totalCount } = res
      //       this.pageInfo.totalNum = totalCount
      //       this.tableList = data || []
      //     } else {
      //       this.tableList = res || []
      //     }
      //   })
    },
    /**
     * dialog对话框数据处理
     * @opts {*}
     */
    showDialog(opts) {
      this.dialogObj = {
        isShow: true,
        isEdit: opts.isEdit || false,
        title: opts.title || '批量生成设备号',
        initData: opts.initData
      }
    },
    /**
     * dialog新增、编辑处理函数
     */
    dialogConfirm() {
      const childRef = this.$refs.childRef
      console.log(this.$refs.childRef.formModel)
      console.log(this.dialogObj.isEdit)
      if (this.dialogObj.isEdit) {
        deviceUpdateDeviceApi({
          id: this.$refs.childRef.formModel.id,
          name: this.$refs.childRef.formModel.name,
          address: this.$refs.childRef.formModel.address,
          status: this.$refs.childRef.formModel.status
        }).then(res => {
          console.log('229====', res)
          if (res.code === 0) {
            this.$msgTip('删除成功')
            this.dialogObj.isShow = false
            this.fetchData()
          } else {
            this.$msgTip(res.message, 'error')
          }
        })
      } else {
        // POST请求
        // axios
        //   .post(context + '/device/initDevice', {
        //     quantity: this.$refs.childRef.formModel.quantity
        //   })
        //   .then(res => {
        //     // 处理响应数据

        //     console.log('256====', res)
        //     if (res.data.code === 0) {
        //       this.$message({
        //         message: '新增成功',
        //         type: 'success'
        //       })
        //       childRef.changeShow(true, res.data.data)
        //     } else {
        //       this.$msgTip(res.message, 'error')
        //     }
        //   })
        //   .catch(error => {
        //     // 处理错误
        //     this.$msgTip(error.message, 'error')
        //   })

        deviceInitDeviceApi({
          quantity: this.$refs.childRef.formModel.quantity
        }).then(res => {
          console.log('256====', res)
          if (res.data.code === 0) {
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            childRef.changeShow(true, res.data.data)
          } else {
            this.$msgTip(res.message, 'error')
          }
        })
      }
    },
    /**
     * 删除单条表格数据
     * @id {Number}
     */
    deleteHandle(params) {
      this.$api.vehicle.fetch('', params).then(() => {
        this.$msgTip('删除成功')
        this.delResetData()
      })
    }
  }
}
</script>
